<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <div th:replace="./common/include_header :: copyright"></div>
</head>
<body>
<!-- Content Wrapper. 其他页面替换的地方-->
<!-- 新增菜单弹出框   begin -->
<div class="modal fade" id="addDatasourceModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="dataTitle">新增数据源</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="saveDatasourceForm">
                <div class="col-md-12">
                    <div class="card card-warning">
                        <!-- /.card-header -->
                        <div class="card-body">
                            <input type="hidden" name="operateType" id="operateType" th:value="add">
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- select -->
                                    <div class="form-group">
                                        <label>数据库类型</label>
                                        <select class="form-control" name="jdbcType" id="jdbcType">
                                            <option th:value="oracle">oracle</option>
                                            <option th:value="mysql">mysql</option>
                                            <option th:value="no">敬请期待。</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="连接名[ps：不能重复]"
                                               name="jdbcName" id="jdbcName" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="主机名或者IP地址" name="jdbcUrl"
                                               id="jdbcUrl" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input custom-control-input-danger" type="radio"
                                               id="sidType" name="sidType" checked>
                                        <label for="sidType" class="custom-control-label">服务名</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                               type="radio" id="sidType2" name="sidType">
                                        <label for="sidType2" class="custom-control-label">SID</label>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="服务名或SID" name="jdbcSID"
                                               id="jdbcSID">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="端口" name="jdbcPort"
                                               id="jdbcPort" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="用户名" name="jdbcUser"
                                               id="jdbcUser" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="密码" name="jdbcPassword"
                                               id="jdbcPassword" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-info" th:onclick="testConnection()">测试连接</button>
                    <button type="button" class="btn btn-primary" th:onclick="saveDatasource()">保存</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 新增菜单弹出框   end -->
<!-- Main content -->
<section class="content">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="margin-left: 0px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>数据查询列表</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-warning">
                            <div class="card-header">
                                <h3 class="card-title">查询条件</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <!-- text input -->
                                            <div class="form-group">
                                                <label>数据源名称</label>
                                                <input type="text" class="form-control" placeholder="数据源名称"
                                                       id="queryJdbcName" name="jdbcName" th:value="${jdbcName}">
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <button type="submit" id="queryDatasource" class="btn btn-primary">查询</button>
                                        <button type="button" id="addDatasource" class="btn btn-primary"
                                                data-toggle="modal" data-target="#addDatasourceModal">新增
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">结果列表</h3>
                            </div>
                            <div>
                                <div class="card-body">
                                    <table id="dataTable" class="table dataTables_wrapper">
                                        <thead>
                                        <tr>
                                            <th width="5%">序号</th>
                                            <th width="0%">隐藏主键</th>
                                            <th width="5%">库类型</th>
                                            <th width="25%">连接名</th>
                                            <th width="25%">主机名</th>
                                            <th width="15%">用户名</th>
                                            <th width="10%">密码</th>
                                            <th width="15%">操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /. ROW  -->

                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
</section>
<!-- /.content -->
<script>
    $(function () {
        var selected = [];
        var table = $('#dataTable').dataTable({
            aoColumns: [
                {
                    "sTitle": "序号",
                    "sClass": "dt-center",
                    "bSortable": false,
                    "data": null,
                    "targets": 0
                },
                {"visible": false, "data": "uid"},
                {"data": "jdbcType"},
                {"data": "jdbcName"},
                {
                    "data": "jdbcUrl",
                    "class": "text-center",
                    "render": function (data, type, row) {
                        var newdata = data;
                        if (newdata.length > 15)
                            newdata = data.substring(0, 15) + '...';
                        return '<span title="' + data + '">' + newdata + '</span>';
                    }
                },
                {"data": "jdbcUser"},
                {"data": "jdbcPassword"},
                {
                    "data": "uid",
                    "class": "text-center",
                    "render": function (data, type, row) {
                        return '<span class="btn btn-primary btn-xs" data-id="' + data + '" onclick="testConnectionThis(\'' + data + '\')">测试</span> <span class="btn btn-danger btn-xs" data-id="' + data + '" onclick="delDatasource(\'' + data + '\')">删除</span>';
                    }
                }
            ],
            "fnDrawCallback": function () {//增加序号
                this.api().column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            sAjaxDataProp: 'data',//指定当从服务端获取表格数据时，数据项使用的名字
            "ajax": {
                "url": "/jdbc/list",
                "data": function (d) {
                    //添加额外的参数传给服务器
                    d.jdbcName = $('#queryJdbcName').val();
                },
                success: function (sort) {//加一个success即可实现list无权限提醒
                    if (sort.code == 500) {
                        alert(sort.msg);
                    } else {
                        $('#dataTable').dataTable().fnClearTable();    //清空表格
                        if (sort.data.length > 0)
                            $('#dataTable').dataTable().fnAddData(sort.data, true);  //刷下表格
                    }
                }
            },
            //"sAjaxSource" : "/sys/generator/list",
            searching: false, //去掉搜索框方法一：百度上的方法，但是我用这没管用
            sDom: '"top"i',   //去掉搜索框方法二：这种方法可以，动态获取数据时会引起错误
            bFilter: false,    //去掉搜索框方法三：这种方法可以
            bAutoWidth: false, //是否启用自动适应列宽
            bDestroy: true,
            bLengthChange: false,   //去掉每页显示多少条数据方法
            pagination: true, //分页
            "processing": true,//显示“处理中...”
            "serverSide": false,
            bSort: false,
            //"fnServerParams" : function(aoData) {
            //    aoData.push({
            //        "name" : "tableName",
            //        "value" : $('#tableName').val()
            //    });
            //},
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条",
                "sZeroRecords": "没有找到符合条件的数据",
                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                "sInfoEmpty": "没有记录",
                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                "sSearch": "搜索",
                "sProcessing": "数据加载中...",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "尾页"
                }
            },
            "rowCallback": function (row, data) {
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).toggleClass('selected');
                }
            },
            "initComplete": function (settings, json) {
                alert('DataTables has finished its initialisation.');
            }
        });
        $('#dataTable tbody').on('click', 'tr', function () {
            var id = this.id;
            var index = $.inArray(id, selected);

            if (index === -1) {
                selected.push(id);
            } else {
                selected.splice(index, 1);
            }

            $(this).toggleClass('info');
        });
    });

    //删除数据源，目前只能删除子节点菜单
    function delDatasource(uid) {
        swal({
            title: '确定删除吗？',
            text: '删了，你将无法恢复它！',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '执意删除！',
        }).then(function () {
            $.ajax({
                type: "POST",
                url: "/jdbc/del",
                data: "uid=" + uid,
                success: function (data) {
                    $("#dataTable").DataTable().ajax.reload();
                    swal(
                        '删除！',
                        '哦豁，你的数据源已经被删除。',
                        'success'
                    );
                },
                error: function () {
                    swal(
                        'error',
                        '删除数据源失败。',
                        'error'
                    );
                }
            })
        })
    }

    function saveDatasource() {
        if ($("#saveDatasourceForm").valid()) {
            $.ajax({
                type: "POST",
                url: "/jdbc/save",
                data: $('#saveDatasourceForm').serialize(),
                success: function (data) {
                    //$('#'+menuId).remove();
                    if (data == '000') {
                        $("#addDatasourceModal").modal("toggle");  //手动关闭
                        $("#dataTable").DataTable().ajax.reload();
                        swal(
                            'success！',
                            '保存成功。',
                            'success'
                        );
                    } else {
                        swal(
                            'error',
                            data,
                            'error'
                        );
                    }
                },
                error: function () {
                    swal(
                        'error',
                        '保存失败。',
                        'error'
                    );
                }
            })
        }
    }

    function testConnection() {
        if ($("#saveDatasourceForm").valid()) {
            $.ajax({
                type: "POST",
                url: "/jdbc/testConnection",
                data: $('#saveDatasourceForm').serialize(),
                success: function (data) {
                    //$('#'+menuId).remove();
                    if (data == '000') {
                        swal(
                            'success！',
                            '测试成功。',
                            'success'
                        );
                    } else {
                        swal(
                            'error',
                            data,
                            'error'
                        );
                    }
                },
                error: function () {
                    swal(
                        'error',
                        '测试失败。',
                        'error'
                    );
                }
            })
        }
    }

    function testConnectionThis(uid) {
        $.ajax({
            type: "POST",
            url: "/jdbc/testConnectionThis",
            data: "uid=" + uid,
            success: function (data) {
                //$('#'+menuId).remove();
                if (data == '000') {
                    swal(
                        'success！',
                        '测试成功。',
                        'success'
                    );
                } else {
                    swal(
                        'error',
                        data,
                        'error'
                    );
                }
            },
            error: function () {
                swal(
                    'error',
                    '测试失败。',
                    'error'
                );
            }
        })
    }
</script>
</body>
</html>

